<template>
   <!-- 首页模块 -->
    <div class="home clearfix">
        <div class="top clearfix">
            <img src="../../assets/style/img/home_image/banner.png" alt="">
        </div>
        <!-- 内容楼层模块 -->
        <div class="but w">
            <div class="but_a">
                <h3>银行抵押产品</h3>
                <div class="a_content">
                    <img src="../../assets/style/img/home_image/抵押产品1.png" alt="">
                    <div class="test">
                        <h4>农商"宅基地使用权（农房财产权)" 抵押贷款
                        </h4>
                        <p> “宅基地使用权”抵押贷款是指在不改变宅基地所有权性质的前提下，借款人以宅基地使用权作为抵押，由德清农商银行向符合条件的借款人发放的，在约定期限内（最长贷款期限为10年）还本付息的贷款。</p>
                        <button @click="goMortgage">查看详情</button>
                    </div>
                </div>
                 <div class="a_content">
                    <img src="../../assets/style/img/home_image/德清湖商银行.png" alt="">
                    <div class="test">
                        <h4>"宅小贷"宅基地使用权(农房财产权)抵押贷款
                        </h4>
                        <p> 是指在不改变宅基地所有权性质的前提下，宅基地使用权权利人以宅基地使用权（农房财产权）作为抵押，由本行向符合条件的借款人发放的，在约定期限内还本付息的贷款。</p>
                        <button @click="goMortgage">查看详情</button>
                    </div>
                </div>
            </div>
            <div class="but_b">
                <div class="lf">
                    <h3>最新农户抵押信息</h3>
                    <ul>
                        <li>沈建章申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                        <li>沈菊明申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                        <li>沈学祥申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                        <li>沈学年申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                        <li>杨生龙申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                        <li>杨金华申请的宅基地抵押申请<span>2021-09-15 14:02</span></li>
                    </ul>
                </div>
                <div class="rg">
                    <h3>农户抵押信息精选<span class="ckgd" @click="goIssue">查看更多<i class="icon-cheveron-right"></i></span></h3>
                    <ul>
                        <li>
                            <img src="../../assets/style/img/home_image/pic (1).png" alt="">
                            <p>沈建章的宅基地抵押</p>
                            <span class="dy">抵押</span><span class="time">10年</span>
                            <p class="phone"><img src="../../assets/style/img/home_image/电话.svg" alt="">13732371425</p>
                        </li>
                        <li class="zj">
                            <img src="../../assets/style/img/home_image/pic (1).png" alt="">
                            <p>沈菊明的宅基地抵押</p>
                            <span class="dy">抵押</span><span class="time">10年</span>
                            <p class="phone"><img src="../../assets/style/img/home_image/电话.svg" alt=""> 15957298917</p>
                        </li>
                        <li>
                            <img src="../../assets/style/img/home_image/pic (1).png" alt="">
                            <p>姚林章的宅基地抵押</p>
                            <span class="dy">抵押</span><span class="time">10年</span>
                            <p class="phone"><img src="../../assets/style/img/home_image/电话.svg" alt=""> 13738214580</p>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="but_c">
                <h3>产品答疑 <span class="ckxq" @click="goContact">查看详情<i class="icon-cheveron-right"></i></span></h3>
                <ul>
                    <li>
                        <h4><img src="../../assets/style/img/home_image/问.png" alt=""> “宅基地抵押贷款”是什么样的产品？</h4>
                        <p><img src="../../assets/style/img/home_image/答.png" alt=""> 宅基地抵押贷款是用您的宅基地抵押，直接获取借款，借款资金用于各种消费和经营用途的一款借款产品。抵押后宅基地的资格权仍归您所有。</p>
                    </li>
                    <li class="zj">
                        <h4><img src="../../assets/style/img/home_image/问.png" alt="">一般可抵押借款多少钱？能借多久？</h4>
                        <p><img src="../../assets/style/img/home_image/答.png" alt="">要根据您的实际宅基地的位置和面积等评估后才能得出借款金额，最少借1年，最多借20年。</p>
                    </li>
                    <li>
                        <h4><img src="../../assets/style/img/home_image/问.png" alt="">借款利率多少？除了利息以外，还有什么费用么？</h4>
                        <p><img src="../../assets/style/img/home_image/答.png" alt="">年利率4%，除了利息以外，我们不收取任何其它费用。</p>
                    </li>

                </ul>
            </div>
            <div class="but_d clearfix">
                <h3>金融小工具</h3>
                <div class="d_content">
                    <div class="left">
                        <h4>金融额度</h4>
                        <p>一分钟测贷款额度</p>
                    </div>
                    <div class="right">
                        <h4>土地评估</h4>
                        <p>免费评估宅基地价值</p>
                    </div>
                </div>
            </div>
            <div class="but_e clearfix">
                <h3>合作银行<span class="ckxq" @click="goCoopbank">查看详情<i class="icon-cheveron-right"></i></span></h3>
                <ul>
                    <a href="javascript:void(0)">
                        <li><img src="../../assets/style/img/home_image/湖.png" alt=""></li>
                    </a>
                    <a href="javascript:void(0)">
                        <li><img src="../../assets/style/img/home_image/得农.png" alt=""></li>
                    </a>
                    <a href="javascript:void(0)">
                        <li><img src="../../assets/style/img/home_image/编组 4.png" alt=""></li>
                    </a>
                    <a href="javascript:void(0)">
                        <li><img src="../../assets/style/img/home_image/编组 5.png" alt=""></li>
                    </a>
                    <a href="javascript:void(0)">
                        <li><img src="../../assets/style/img/home_image/编组 6.png" alt=""></li>
                    </a>
                    <a href="javascript:void(0)">
                        <li class="last"><img src="../../assets/style/img/home_image/编组 7.png" alt=""></li>
                    </a>
                </ul>
            </div>
            <div class="but_f">
                <h3>抵押贷款流程<span class="ckxq" @click="goFlow">查看详情<i class="icon-cheveron-right"></i></span></h3>
                <div class="f_content">
                    <img src="../../assets/style/img/home_image/流程 (1).png" alt="">
                </div>
            </div>
            <!-- 客服服务模块start -->
						<div class="serviceperson clearfix">
							<div class="person">
									<div class="left free">免费咨询</div>
									<div class="right only"><img src="../../assets/style/img/service_image/在线咨询.svg" alt=""></div>
							</div>
							<div class="service">
									<div class="number">
											<p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
            </div>
            <div class="message">
                <i class="icon-wechat"></i>
                <div class="dh">
                    <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                </div>
            </div>
            <div class="input_content">
                <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                <button>发送</button>
            </div>
        </div>
    </div>
        </div>
    </div>
</template>

<script>
import '../service'

export default {
  name:'Home',
  methods: {
    goMortgage(){
      // console.log(666)
      this.$router.push({
        name:'Mortgage'
      })
    },
    goIssue(){
      this.$router.push({
        name:'Issue'
      })
    },
    goContact(){
      this.$router.push({
        name:'Contact'
      })
    },
    goCoopbank(){
      this.$router.push({
        name:'CoopBank'
      })
    },
    goFlow(){
      this.$router.push({
        name:'Flow'
      })
    },
  },
}
</script>

<style lang='less' scoped>
body{
  overflow-x: hidden;
}
.home{
  width: 100%;
  .top{
    margin: 0 auto;
    width: 1920px;
    // height: 480px;
    img{
      margin: 0 auto;
      margin-top: -3px;
    }
  }
  .but{
    position: relative;
    margin-top: 40px;
    .ckxq{
      float: right;
      font-size: 16px;
      padding-top: 14px;
    }
    .ckxq:hover,.ckgd:hover{
       cursor: pointer;
    }
    h3{
      border-left: 4px solid #EE384A;
      padding-left: 16px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
    }
    .but_a{
      .a_content{
        border: 1px solid #D8D8D8;
        width: 100%;
        height: 360px;
        margin-top: 20px;
        .test{
          padding-right: 20px;
          float: right;
          width: 452px;
          height: 100%;
          h4{
            margin: 20px 0 20px;
            font-family: PingFangSC-Semibold;
            font-size: 26px;
            color: #333333;
            letter-spacing: 0;
            text-align: justify;
            font-weight: 600;
          }
          p{
            text-indent: 2em;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #666666;
            letter-spacing: 0;
            text-align: justify;
            line-height: 36px;
            font-weight: 400;
          }
          button{
            padding-left: 36px;
            width: 152px;
            height: 52px;
            background: #EE384A;
            border-radius: 4px;
            outline: none;
            border: none;
            margin-top: 20px;

            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: justify;
            font-weight: 400;
          }
        }
      }
    }
    .but_b{
      // border: 1px solid black;
      position: relative;
      margin: 40px 0;
      height: 306px;
      .lf{
        height: 100%;
        width: 50%;
        border-right: 1px solid #D8D8D8;
        ul{
          font-size: 16px;
          li{
            margin-top: 20px;
            padding-left: 4px;
          }
          li:before {
            content: "";
            width: 6px;
            height: 6px;
            display: inline-block;
            border-radius: 50%;
            background: #888888;
            vertical-align: middle;
            margin-right: 8px;
            }
          span{
            padding-right: 19px;
            float: right;
          }
        }
      }
      .rg{
        padding-left: 20px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 50%;
        h3{
          span{
            padding-top: 14px;
            float: right;
            font-size: 16px;
          }
        }
        ul{
          width: 100%;
          height: 264px;
          margin-top: 20px;
          p{
            margin: 8px 0 10px;
            font-size: 14px;
            color: #333333;
          }
          .zj{
            margin: 0 12px;
          }
        }
        li{
          float: left;
          span{
            padding: 0 8px;
            font-size: 12px;
            line-height: 18px;
          }
          .dy{
            color: #EE384A;
            background: rgba(238, 56, 74, .1);
            border-radius: 1px;
          }
          .time{
            margin-left: 4px;
            color: #437AFF;
            background: rgba(67, 122, 255, .1);
            border-radius: 1px;
          }
          .phone{
            margin: 22px 0 0;
          }
        }
      }
    }
    .but_c{
      width: 100%;
      ul{
        margin-top: 30px;
        li{
          width: 100%;
          height: 116px;
          background: #FFFFFF;
          border: 1px solid #D8D8D8;
          border-radius: 8px;
          img{
            vertical-align: middle;
            padding-right: 16px;
          }
        }
        h4{
          margin: 20px 0 0 30px;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #333333;
          text-align: justify;
          font-weight: 600;
        }
        p{
          margin: 20px 0 20px 30px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888888;
          text-align: justify;
          font-weight: 400;
        }
        .zj{
          margin: 16px 0;
        }
      }
    }
    .but_d{
      width: 100%;
      margin: 40px 0;
      .d_content{
        margin-top: 20px;
        .left,.right{
          float: left;
          width: 565px;
          height: 280px;
        }
        .left{
          margin: 0 30px 0 18px;
          background: url(../../assets/style/img/home_image/贷款额度.png);
        }
        .right{
          background: url(../../assets/style/img/home_image/土地评估.png);
        }
        h4{
          margin: 40px 0 20px 40px;
          font-family: PingFangSC-Semibold;
          font-size: 40px;
          color: #FFFFFF;
          letter-spacing: 0;
          font-weight: 600;
        }
        p{
          margin-left: 40px;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #FFFFFF;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
    }
    .but_e{
      ul{
        margin-top: 30px;
        li{
          margin-right: 30px;
          float: left;
          width: 175px;
          height: 80px;
        }
        .last{
          margin-right: 0;
        }
      }
      
    }
    .but_f{
      margin: 40px 0;
      .f_content{
        margin: 40px 0 0 48px;
      }
    }
  }
}
// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 1072px;
  right: -370px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>